<html>
    <head>
    <!--blueprint css -->
    <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
    
    <style>
        /*remove blueprint's table tr style*/
        tbody tr:nth-child(even) td, tbody tr.even td {background:none;}
    </style>
    
    
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <link type="text/css" rel="stylesheet" href="css/jqueryui/themes/redmond/jquery-ui.min.css" />
    
    
    

    <!-- jqgrid -->
    <script src="js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/jqgrid/js/jquery.jqGrid.min.js" ></script>
    <link rel="stylesheet" href="js/jqgrid/css/ui.jqgrid.css" type="text/css" media="screen" />

    <!-- app.js -->
    <script src="app.js" type="text/javascript"></script>
    
    </head>
    <body >
        <div id="tabs">
            <ul>
            <li><a href="#tabs-1">Books</a></li>
            <li><a href="#tabs-2">Settings</a></li>
            </ul>
            <div id="tabs-1">
                <div class="container" style="width:800px" >
                    <div class="span-15 last">
                        <input id='search_text' size=20 />
                        Status:<select id="search_status">
                            <option>Select...</option>
                            <option value='1'>Reading</option>
                            <option value='2'>Read</option>
                            <option value='3'>Going to Read</option>
                        </select>
                        Favor:<input type='checkbox' id="search_favor"  >
                        <input type='button' id='button_search_book' value="Search">
                    </div>  
                    <div class="span-15 last">
                        <table id="table_search_result" >
                            
                        </table>
                        <div id="table_search_result_pager"></div> 
                    </div>
                    <div class="span-20 last hide" id="div_book_detail" >
                        <input type='hidden' id="book_id" >
                        Name: <span id="book_name"></span>  <br />
                        Path: <span id="book_path"></span>  <br />
                        Favor: <input type="checkbox" id="book_favor">
                        Status: <select id="book_status">
                            <option value="0">Select...</option>
                            <option value='1'>Reading</option>
                            <option value='2'>Read</option>
                            <option value='3'>Going to Read</option>
                        </select>
                        Page: <input id="book_page" size=6 >
                        Tags: <input id="book_tags" size=40> <br />
                        Comment:<br /><textarea id="book_comment" style="width:600px;height:50px;"></textarea><br />
                        <input type="button" id="button_open_book" value="Open Book" /> <input type="button" id="button_save_book" value="Save">
                    </div>          
                </div>
                
            </div>
            <div id="tabs-2">
                <div class="container" style="width:780px" >
                    <div class="span-10 border">
                        <select id="folders" class="span-9" size=10></select>
                    </div>
                    <div class="span-5 last">
                        <table style="height:150px">
                        <tr><td><input type='button' id="button_remove_folder" value='Remove Folder'></td></tr>
                        <tr><td><input type='button' id="button_scan_folder" value='Scan Folder'></td></tr>
                        
                        </table>
                    </div>
                    
                    <div class="span-15 last">
                        <input type='button' id="button_add_new_folder" value="Add New Folder">
                    </div>
                    <div class="span-15 last">
                        <span id="message" ></span>
                    </div>
                </div>                
            </div>
        </div>    
    </body>
</html>